<template>
    级联：
     <el-cascader :options="AreaInfo" :props="props1" clearable  @change="AreatreeChanger"/>
    树形控件：
</template>

<script lang="ts" setup>
    import {ref,reactive,onMounted} from  'vue';
    import axios from 'axios';

    //区域响应式数据
    const AreaInfo=ref([])
    const props1 = {
        checkStrictly: true,
        value:"Id",
        label:"Area_Name",
        children:"Children"
    }
    onMounted(()=>{
        GetAreaTree();
    })
    //加载数据
    const GetAreaTree=()=>{
        axios.get("http://localhost:5247/api/Area/GetAreaTree")
        .then(res=>{
            AreaInfo.value=res.data.Data;
        })
    }

    const Area_Id=ref([])
    const AreatreeChanger=(value:any)=>{
        Area_Id.value=value[value.lenth-1];
    }
</script>